//主色
$sys-color: #1d83e8;
$sys-light-color: #e9f4ff;
$sys-dark-color: #021023;
$sys-dark-color2: #031c36;
$sys-danger-color: #FF2328;

// logo相关
$sys-logo-color: #f1f1f1;
$sys-logo-background: $sys-dark-color;
$sys-logo-text-size: 16px;

// 左menu菜单相关
$sys-menu-text-color: #a4abb2;
$sys-menu-text-active-color: #fff;
$sys-menu-background: $sys-dark-color;
$sys-menu-hover-background: $sys-dark-color2;
$sys-menu-active-background: $sys-color;
$sys-menu-base-width: 210px;
$sys-menu-mini-width: 52px;
$sys-menu-item-height: 56px;
$sys-menu-left-padding: 16px;
$sys-menu-text-size: 14px;


//当前账期
$sys-account-date-color: #f1f5f8;
$sys-account-date-size-mini: 12px;
$sys-account-date-size-default: 14px;
$sys-account-date-height: 30px;
$sys-account-date-background: #003399;

// header区域
$sys-header-height: 50px;
$sys-header-text-size: 14px;
$sys-header-text-color: $sys-dark-color;
$sys-header-hover-bg-color: #f5f5f5;
$sys-header-border-color: #d8dce5;
$sys-header-tab-background: #fff;

// tabs区域
$sys-tags-box-height: 38px;
$sys-tags-box-border-color: #d8dce5;
$sys-tags-box-background: #f4f6f7;

$sys-tag-height: 28px;
$sys-tag-text-color: $sys-dark-color;
$sys-tag-text-hover-color: $sys-color;
$sys-tag-border-color: #ffffff;
$sys-tag-border-hover-color: #ffffff;

$sys-tag-close-ico-color: #ffffff;
$sys-tag-close-bg-color: var(--el-color-danger);

$sys-tags-menu-height: 34px;
$sys-tags-popper-width: 100px;
$sys-tags-popper-padding: 4px;

// contaier区域，父框架
$sys-container-background: #f0f2f5;
$sys-container-main-background: #ffffff;

// footer区域
$sys-footer-height: 30px;
$sys-footer-border-color: #d8dce5;
$sys-footer-size: 12px;
$sys-footer-color: #a0a3a5;

// 页面区域, 这一块是你在自己写的文件中使用主题，核心需要关注的地方
$sys-page-background: #fff; // 主背景
$sys-page-color: #303133; // 主要的文本颜色
$sys-page-tip-color: rgba(0, 0, 0, 0.45); // 协助展示的文本颜色
$sys-page-border-color: #000; // 通用的边框配置色，便于主题扩展

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": $sys-color,
    ),
    "success": (
      "base": #67C23A,
    ),
    "warning": (
      "base": #E6A23C,
    ),
    "danger": (
      "base": $sys-danger-color,
    ),
    "error": (
      "base": #F56C6C,
    ),
    "info": (
      "base": #909399,
    ),
  ),

  $button-padding-horizontal: (
    "default": 16px,    //button的padding
  ),

  $table:(
    'border-color': #D9E2EC,
    'header-bg-color': #F4F6F9,
    'header-text-color': #909399,
    'current-row-bg-color': $sys-light-color
  ),

  $table-padding:(
    'default': 4px 0,
  )
);

@mixin menuItemConMixin(){
  display: flex !important;
  color: $sys-menu-text-color !important;
  padding-left: $sys-menu-left-padding !important;
  padding-right: 0 !important;
}

@mixin menuItemMixin(){
  height: $sys-menu-item-height;
  line-height: $sys-menu-item-height;
  color: $sys-menu-text-color !important;
}

@mixin menuSpanMixin(){
  flex: 1;
  width: auto;
  height: auto;
  visibility: visible;
  margin-left: 16px;
  font-size: $sys-menu-text-size;
  overflow: hidden;
}

@mixin arrowMixin(){
  display: block;
  right: 10px;
  top: 23px;
}

@mixin menuHoverMixin(){
  color: $sys-menu-text-active-color !important;
  background-color: $sys-menu-hover-background !important;
}
@mixin menuActiveMixin(){
  color: $sys-menu-text-active-color !important;
  background-color: $sys-menu-active-background !important;
}
